<template>
  <view class="good-main-container" :style="'padding-top:' + customBar + 'px;'">
    <!-- 边框 -->
    <view class="border-good">
      <view class="silde">
        <view class="silde-img">
          <image class="br" :src="br" />
          <image class="br" :src="br" />
        </view>
      </view>

      <!-- 背景图 -->
      <image
        class="bg-img"
        :src="
          $IMG_URL + '/uploads/20230428/f6ea8e2ac2a27cebd40d548557f6176f.jpg'
        "
        mode="widthFix"
      />
      <view class="silde">
        <view class="silde-img">
          <image class="br" :src="br" />
          <image class="br" :src="br" />
        </view>
      </view>
    </view>
    <!-- 主内容区域 -->
    <view class="content-good">
      <!-- 加料 -->
      <view class="feeding" v-if="list.length > 0">
        <view class="star">
          <image class="star-img" :src="star" mode="widthFix" />
        </view>
        <view class="star">
          <image class="star-img" :src="star" mode="widthFix" />
        </view>
        <!-- 
        <view class="flash">
          <image
            class="flash-img"
            :class="changeing ? 'on' : ''"
            :src="flash"
          />
        </view> -->

        <view class="dir-1">
          <image
            class="dir-1-img"
            :class="changeing ? 'on' : ''"
            :src="dir_1"
          />
        </view>

        <view class="dir-2">
          <image
            class="dir-2-img"
            :class="changeing ? 'on' : ''"
            :src="dir_2"
          />
        </view>
      </view>

      <!-- 商品图展示 -->
      <view class="good-show" v-if="list.length > 0">
        <!-- <view class="br-circle-1-g">
          <image
            class="br-circle-1"
            :class="changeing ? 'on' : ''"
            :src="br_1"
          />
        </view> -->

        <!--            <image class="good-img" :src="list[active].cover" mode="widthFix" /> -->

        <swiper
          class="swiper-goods-group"
          :current="swiperCurrent"
          autoplay
          @transition="transition"
          @animationfinish="animationfinish"
          @change="onChange"
          :duration="duration"
          circular
        >
          <swiper-item
            class="swiper-item"
            :class="swiperCurrent != index ? 'mini' : ''"
            v-for="(item, index) in list"
            :key="index"
          >
            <image
              class="good-img"
              :src="item.cover"
              :lazy-load="true"
              mode="widthFix"
            />
          </swiper-item>
        </swiper>

        <!-- <view class="br-circle-2-g">
          <image
            class="br-circle-2"
            :class="changeing ? 'on' : ''"
            :src="br_2"
          />
        </view> -->
      </view>
      <!-- 商品陈列 滑块 -->
      <view class="good-exhibition">
        <scroll-view
          class="good-scroll"
          scroll-x
          :scroll-with-animation="true"
          :scroll-left="scrollLeft"
          @scroll="onScroll"
        >
          <view class="good-list" id="goodlist">
            <view
              :id="'good' + item.id"
              class="good-item"
              :class="[
                swiperCurrent == index ? 'active' : '',
                Math.abs(index - swiperCurrent) == 2 ? 'ops' : '',
              ]"
              v-for="(item, index) in list"
              :key="index"
              @tap="clickGood(item, index)"
            >
              <image
                class="good-cover"
                mode="widthFix"
                :src="item.thumb"
                :lazy-load="true"
                :alt="item.goods_name"
              />
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
// import bg from '../img/bg-main.jpg';
import br from '../img/silter-0.png';
import star from '../img/4.png';
import br_1 from '../img/br-4.png';
import br_2 from '../img/br-5.png';
import flash from '../img/3.png';
import dir_1 from '../img/dir-1.png';
import dir_2 from '../img/dir-2.png';

import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(60);

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},

  props: {
    details: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      //图片
      star,
      // bg,
      br,
      br_1,
      br_2,
      flash,
      dir_1,
      dir_2,
      /////
      // 当前图片 index
      active: 0,
      // 当前滚动位置
      scrollLeft: 0,
      // 当前滚动位置 实时
      oldScrollLeft: 0,
      swiperCurrent: 0,
      duration: 1000,
      // 定时器
      timer: null,

      circle: true,

      changeing: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    list() {
      return this.details?.image_list || [];
    },

    // 高度
    customBar() {
      let statusBarHeight = systemInfo.statusBarHeight;
      // #ifndef MP
      return systemInfo.platform == 'android'
        ? statusBarHeight + 50
        : statusBarHeight + 45;
      // #endif
      // #ifdef MP-WEIXIN
      return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
      // #endif
      // #ifdef MP-ALIPAY
      return statusBarHeight + systemInfo.titleBarHeight;
      // #endif
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    // this.autoChange();
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // 监听滚动
    onScroll(e) {
      // this.onItemRect();
      this.oldScrollLeft = e.detail.scrollTop;
    },

    onItemRect() {
      _delay(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll('.good-item')
          .boundingClientRect((data) => {})
          .exec();
      }, false);
    },

    // autoChange() {
    //   if (!this.list?.length) return;
    //   if (this.timer) {
    //     clearInterval(this.timer);
    //   }
    //   this.timer = setInterval(() => {
    //     const len = this.list.length;
    //     let ind = 0;
    //     if (this.active + 1 < len) {
    //       ind = this.active + 1;
    //       this.changeGood(this.list[ind], ind);
    //     } else if (this.active + 1 >= len) {
    //       ind = 0;
    //       this.changeGood(this.list[ind], ind);
    //     }
    //   }, 5000);
    // },

    // 点击 缩略图 切换
    clickGood(item, index) {
      this.swiperCurrent = index;
      this.changeGood(item, index);
    },
    /**
     *  'good' + item.id
     */
    // 切换商品效果图
    changeGood(item, index) {
      this.active = index;
      this.scrollLeft = this.oldScrollLeft;
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#' + 'good' + item.id)
        .boundingClientRect((data) => {
          const distance = data.width * (index + 1) + 2 * (index + 1);
          const margin = data.width;
          if (index == 0) {
            this.scrollLeft = 0;
          } else if (index == 1) {
            this.scrollLeft = margin + 2;
          } else if (index > 1) {
            this.scrollLeft = distance - margin;
          } else if (index - 1 === this.list.length) {
            const query_scroll = uni.createSelectorQuery().in(this);
            query_scroll
              .select('#goodlist')
              .boundingClientRect((data) => {
                this.scrollLeft = data.width;
              })
              .exec();
          }
        })
        .exec();
    },

    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition() {
      if (!this.changingMove) {
        this.changingMove = true;
      }
      if (this.changingActiveName) {
        this.changingActiveName = false;
      }
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      this.changingActiveName = true;
      this.changingMove = false;
      this.swiperCurrent = e.detail.current;
    },
    // 切换轮播图
    onChange(ev) {
      // this.swiperCurrent = ev.detail.current;
      this.changeGood(this.list[ev.detail.current], ev.detail.current);
      this.animationItem();
    },
    // 动画启动
    animationItem() {
      this.changeing = true;
      if (this.changeingTimer) {
        clearTimeout(this.changeingTimer);
      }
      this.changeingTimer = setTimeout(() => {
        this.changeing = false;
      }, 700);
    },
  },
};
</script>
<style lang="scss" scoped>
.good-main-container {
  position: fixed;
  /* position: relative; */
  top: 0;
  left: 0;
  width: 100%;
  height: 870rpx;
  // min-height: 60vh;
  background: var(--theme-color-2);
  overflow: hidden;
  --br-width: 36rpx;
  --exhibition: 140rpx;
  --long: 138rpx;
  animation: fade 1s linear 0s 1 normal none;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    box-shadow: 0px -6px 60px 10px rgba(0, 0, 0, 0.4) inset;
  }
  .content-good {
    position: relative;
    padding: 0 var(--br-width);
    padding-bottom: 20rpx;
    z-index: 4;
    width: 100%;
    height: 100%;

    .feeding {
      position: absolute;
      top: 0;
      left: var(--br-width);
      width: calc(100% - var(--br-width) * 2);
      height: 100%;

      .star:nth-child(1) {
        position: absolute;
        top: 20rpx;
        left: 104rpx;
        opacity: 0;
        animation: slide-in-elliptic-right-fwd 2s ease-in 0.6s 1 normal forwards;
        .star-img {
          animation: scale-filter-center 2s linear 0s infinite alternate-reverse
            none;
        }
      }

      .star:nth-child(2) {
        position: absolute;
        bottom: 220rpx;
        right: 90rpx;
        opacity: 0;
        animation: slide-in-elliptic-right-bck 2s ease-in 0.9s 1 normal forwards;
        .star-img {
          animation: scale-filter-center 2s linear 0.5s infinite
            alternate-reverse none;
        }
      }
      .star {
        width: 68rpx;
        height: 62rpx;
        .star-img {
          width: 68rpx;
          height: 62rpx;
        }
      }
      .flash {
        position: absolute;
        top: 180rpx;
        left: 70rpx;
        z-index: 20;
        width: 187rpx;
        height: 86rpx;
        opacity: 0;
        animation: bounce-in-left 0.5s ease-in-out 1.6s 1 normal forwards;
        .flash-img {
          width: 100%;
          height: 100%;
        }
        .flash-img.on {
          width: 100%;
          height: 100%;
          animation: rubberband-diagonal-1 0.4s linear 0s 1 normal none;
        }
      }

      .dir-1 {
        position: absolute;
        top: 290rpx;
        left: 60rpx;
        width: 182rpx;
        height: 130rpx;
        opacity: 0;
        animation: tilt-in-bl 0.5s ease-in-out 0.5s 1 normal forwards;

        .dir-1-img.on {
          animation: shake-tr 1s linear 0s 1 normal none;
        }
        .dir-1-img {
          width: 182rpx;
          height: 130rpx;
        }
      }

      .dir-2 {
        position: absolute;
        top: 290rpx;
        right: 154rpx;
        width: 136rpx;
        height: 105rpx;
        opacity: 0;
        animation: tilt-in-br 0.5s ease-in-out 1s 1 normal forwards;
        .dir-2-img.on {
          animation: shake-bl 1s linear 0s 1 normal none;
        }
        .dir-2-img {
          width: 136rpx;
          height: 105rpx;
        }
      }
    }

    .good-show {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 10;
      margin: 0 auto;
      padding-top: 14rpx;
      max-height: 500rpx;

      .br-circle-1-g {
        position: absolute;
        top: 130rpx;
        display: flex;
        width: 410rpx;
        height: 152rpx;
        overflow: hidden;
        opacity: 0;
        animation: tilt-in-top-1 0.5s ease-in 1.4s 1 normal forwards;
      }
      .br-circle-1 {
        display: block;
        width: 410rpx;
        height: 152rpx;
      }
      .br-circle-2-g {
        position: absolute;
        top: 153rpx;
        display: flex;
        transform: translateX(-7rpx);
        width: 440rpx;
        height: 156rpx;
        overflow: hidden;
        opacity: 0;
        animation: tilt-in-top-1 0.5s ease-in 1.4s 1 normal forwards;
      }
      .br-circle-1.on,
      .br-circle-2.on {
        animation: scale-filter-vibrate 0.6s ease-in-out 0.2s 1 normal none;
      }
      .br-circle-2 {
        display: block;
        width: 440rpx;
        height: 156rpx;
      }
      .good-img {
        margin: 0 auto;
        display: block;
        width: 500rpx;
        height: 100%;
        transition: all 1s;
      }

      .swiper-goods-group {
        margin: 0 auto;
        width: 100%;
        height: 500rpx;
        .swiper-item.mini {
          .good-img {
            transform: scale(0.7);
          }
        }
        .swiper-item {
          width: 100%;
          height: 100%;
          // background: #fff;
        }
      }
    }
  }
  .bg-img {
    position: absolute;
    top: 0;
    left: var(--br-width);
    z-index: 1;
    width: calc(100% - var(--br-width) * 2);
    // height: 100%;
  }
  .border-good {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .silde {
      position: absolute;
      top: 0;
      right: 0;
      width: var(--br-width);
      height: 850rpx;
      overflow: hidden;
      .silde-img {
        display: flex;
        flex-direction: column;
        animation: slide-in-bottom var(--yfs-silde-time) linear 0s infinite
          normal none;
      }
      .br {
        flex-shrink: 0;
        width: var(--br-width);
        height: 850rpx;
      }
    }

    .silde:nth-child(1) {
      position: absolute;
      top: 0;
      left: 0;
      .silde-img {
        animation: slide-in-top var(--yfs-silde-time) linear 0s infinite normal
          none;
      }
    }
  }
  .good-exhibition {
    position: absolute;
    left: var(--br-width);
    bottom: 82rpx;
    width: calc(100% - var(--br-width) * 2);
    height: var(--exhibition);
  }
  .good-scroll {
    width: 100%;
    height: 100%;

    scroll-snap-type: x mandatory;

    .good-list {
      display: inline-flex;
      align-items: center;
      box-sizing: content-box;
      padding-left: calc(var(--long) * 2);
      padding-right: calc(var(--long) * 2);
      min-width: 100%;
      height: var(--exhibition);

      .good-item.active {
        opacity: 1;
        .good-cover {
          filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
        }
      }
      .good-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin: 0 2rpx;
        width: var(--long);
        height: var(--long);
        opacity: 0.7;
        transition: all 0.6s ease-in;
        background: rgba(0, 0, 0, 0.6);
        .good-cover {
          width: 80rpx;
          // height: 80rpx;
        }
        &.ops {
          opacity: 0.4;
        }
      }
    }
  }
}

@keyframes slide-in-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes scale-filter-vibrate {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(200%);
  }
  100% {
    filter: brightness(100%);
  }
}
</style>
